<template>
    <div class="login_container">
        <el-row>
            <el-col :span="12" :xs="0"></el-col>
            <el-col :span="12" :xs="24">
                <el-form class="login_form" :model="loginForm" :rules="rules" ref="loginForms">
                    <h1>Hello</h1>
                    <h2>欢迎来到硅谷甄选</h2>
                    <el-form-item prop="username">
                        <el-input :prefix-icon="User" v-model="loginForm.username"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" :prefix-icon="Lock" v-model="loginForm.password" show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button :loading="loading" class="login_btn" type="primary" size="default" @click="login">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>
<script setup lang="ts">
import { User,Lock } from '@element-plus/icons-vue';
import {reactive,ref} from 'vue';
import useUserStore from "@/store/modules/user";
import {useRouter} from 'vue-router';
import {ElNotification} from 'element-plus';
import {getTime} from '@/utils/time';
let useStore = useUserStore();
let loginForms = ref();
let $router = useRouter();
let loading = ref(false);
let loginForm = reactive({username:'admin',password:'111111'})
const login = async ()=>{
//    let result = useStore.userLogin(loginForm);
//    console.log(result);
//    let result = loginForms.value.validate();
    await loginForms.value.validate();
    console.log(result);
    //console.log(loginForms.value);
    loading.value = true;
    try {
        await useStore.userLogin(loginForm);
        $router.push('/');
        ElNotification({
            type:'success',
            message:'登陆成功',
            title:`HI,${getTime()}好`
        })
        loading.value = false;
    } catch(error) {
        loading.value = false;
        ElNotification({
            type:'error',
            message:(error as Error).message
        })
    }
}
const rules = {
    username:[
        {required:true,message:'用户名不能为空',trigger:"blur"}
    ],
    password:[
        {required:true, min:6, max:15,message:'密码长度至少6位',trigger:'change'}
    ]
}

</script>
<style scoped lang="scss">
.login_container {
    width: 100%;
    height: 100vh;
    background: url('@/assets/images/background.jpg') no-repeat;
    background-size: cover;

    .login_form {
        position: relative;
        width: 80%;
        top: 30vh;
        background: url("@/assets/images/login_form.png") no-repeat;
        background-size: cover;

        h1 {
            color: white;
            font-size: 40px;
        }

        h2 {
            font-size: 20px;
            color: white;
            margin: 20px 0px;
        }
        .login_btn {
            width: 100%;
        }
    }
}
</style>